<template>
	<page-meta :page-style="$theme.pageStyle">
		<!-- #ifndef H5 -->
		<navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
		<!-- #endif -->
	</page-meta>
	<!-- #ifndef H5 -->
	<u-sticky h5-nav-height="0" bg-color="transparent">
		<u-navbar
			:is-back="false"
			:is-fixed="false"
			title="团购单位"
			:border-bottom="false"
			:title-bold="true"
			:title-color="$theme.navColor"
			:background="{ background: $theme.navBgColor }"
		></u-navbar>
	</u-sticky>
	<!-- #endif -->
	<view class="ins">
		<!-- 搜索 -->
		<navigator class="ins-search px-[24rpx] py-[14rpx] bg-white" url="/pages/insure/search">
			<u-search placeholder="请输入关键词搜索" disabled :show-action="false"></u-search>
		</navigator>
		<view class="flex">
			<!-- 分类 -->
			<view class="ins-left mr-3 px-[25rpx] py-[25rpx]">
				<view :class="{ 'ins-left-name2': active == index }" v-for="(item, index) in pageList" :key="index" class="ins-left-name" @click="tabs(item.value, index)">
					{{ item.name }}
				</view>
			</view>
			<!-- 内容 -->
			<view class="ins-right">
				<z-paging ref="paging" v-model="activityData" @query="queryList" :fixed="false" height="100%" use-page-scroll>
					<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in activityData" :key="item.id" btn-width="120">
						<navigator :url="`/pages/insure/insure_detail?id=${item.id}`">
							<view class="ins-card bg-white mx-[20rpx] my-[10rpx] px-[20rpx] py-[20rpx]">
								<view class="ins-card-content text-sm mb-[15rpx]">{{ item.title }}</view>
								<view class="ins-card-content text-sm mb-[15rpx]">联系人：{{ item.name }}</view>
								<view class="ins-card-content text-sm mb-[15rpx]">联系电话：{{ item.phone }}</view>
								<view class="ins-card-content text-sm">地址：{{ item.address }}</view>
							</view>
						</navigator>
					</u-swipe-action>
				</z-paging>
			</view>
		</view>

		<tabbar />
	</view>
</template>

<script lang="ts" setup>
import { ref, shallowRef } from 'vue';
import { hangye, tuangou } from '@/api/shop';
import { onLoad } from '@dcloudio/uni-app';

const paging = shallowRef();

const pageList: any = ref([]);
const type: any = ref('');
const active: any = ref(0);

const activityData: any = ref([]);

const queryList = async (page_no: number, page_size: number) => {
	if(!type.value){return}
	try {
		const { lists } = await tuangou({
			keys: '',
			city: uni.getStorageSync('cityCode')?uni.getStorageSync('cityCode'):'341100',
			type: type.value,
			page_no,
			page_size
		});
		activityData.value.concat(lists);
		paging.value.complete(lists);
	} catch (e) {
		console.log('报错=>', e);
		//TODO handle the exception
		paging.value.complete(false);
	}
};

const tabs = async (id, index) => {
	active.value = index;
	type.value = id;
	paging.value.reload();
};

const getData = async () => {
	pageList.value = await hangye();
	type.value = pageList.value[active.value].value;
	// #ifdef H5
	paging.value.reload();
	// #endif
};
onLoad((options: any) => {
	getData();
});
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.ins {
	&-search {
		margin-bottom: 2rpx;
	}

	&-left {
		width: 180rpx;
		white-space: nowrap;
		padding-top: 35rpx;

		&-name {
			font-size: 28rpx;
			margin-bottom: 60rpx;
			padding-left: 15rpx;
			border-left: 2px solid #fff;
		}

		&-name2 {
			color: #2073f4;
			border-left: 2px solid #2073f4;
		}
	}
	&-right {
		flex: 1;
	}

	&-card {
		border: 1px solid #eee;
		border-radius: 15rpx;
	}
}
</style>
